<template>
    <div id="first-test">
        <div class="title">
            <span>JD.COM 京东</span>
        </div>
        <div class="sub-title">
            <span class="left">持卡人存根</span>
            <span class="right">请妥善保存</span>
        </div>
        <div class="row">
            <span class="label">商户名称：</span>
            <span class="big-value">北京京邦达贸易有限公司</span>
        </div>
        <div class="row">
            <span class="label">商户编号：</span>
            <span>105100000005130</span>
        </div>
        <div class="row">
            <span class="label">终端编号：</span>
            <span>00179092</span>
        </div>
        <div class="row">
            <span class="label">交易日期：</span>
            <span>2018/10/24 15:32:50</span>
        </div>
        <div class="row">
            <span class="label">收单机构：</span>
            <span>建设银行</span>
        </div>
        <div class="row">
            <span class="label">发&nbsp;卡&nbsp;行：</span>
            <span>浦发银行</span>
        </div>
        <div class="row">
            <span class="label">卡&nbsp;&nbsp;&nbsp;&nbsp;号：</span>
            <span class="big-value">&nbsp;6258 33** **** 2716 (c)</span>
        </div>
        <div class="row">
            <span class="label">有 效 期：</span>
            <span>23/03</span>
        </div>
        <div class="row">
            <span class="label">交易类型：</span>
            <span class="large-center">消费</span>
        </div>
        <div class="row-big">
            <span class="label">金额：</span>
            <span class="value">RMB 229.00</span>
        </div>
    </div>
</template>

<style lang="less" scoped>
.clearfix_mixin() {
    &:after {
        content: "";
        display: block;
        clear: both;
    }
}
#first-test {
    box-sizing: border-box;
    font-size: 3mm;
    font-family: "consolas";
    width: 56mm;
    height: 100vh;
    padding: 1.2em;
    background: rgb(255, 255, 255);

    .title {
        font-size: 2em;
        text-align: center;
        margin-top: 1em;
    }

    .sub-title {
        .clearfix_mixin();
        font-size: 0.7em;
        margin-bottom: 1em;

        .left {
            float: left;
        }
        .right {
            float: right;
        }
    }
    .row {
        .clearfix_mixin();

        .big-value {
            display: block;
            transform: scaleY(2);
            transform-origin: left center;
            margin: 0.5em 0;
        }
        .large-center {
            display: block;
            text-align: center;
            transform: scaleX(2);
            transform-origin: center center;
        }
    }
    .row-big {
        .clearfix_mixin();
        transform: scaleY(2);
        transform-origin: left center;
        margin: 0.5em 0;
        .value {
            float: right;
        }
    }
}
</style>
